<template>
	<div class="query-evidence-container">
		<el-card shadow="hover" body-style="padding:8px; ">
			<el-form :inline="true" :model="formInline" size="mini">
				<el-row>
					<el-col :span="24">
						<el-form-item label-width="100px" label="案件编号">
							<el-input v-model="formInline.caseNo" placeholder="请输入..."></el-input>
						</el-form-item>
						<el-form-item label-width="100px" label="关联编号">
							<el-input v-model="formInline.inspectionNo" placeholder="请输入..."></el-input>
						</el-form-item>
						<el-form-item label-width="100px" label="案件名称">
							<el-input v-model="formInline.caseName" placeholder="请输入..."></el-input>
						</el-form-item>
						<el-form-item label-width="100px" label="物品编号">
							<el-input v-model="formInline.no" placeholder="请输入..."></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label-width="100px" label="物品名称">
							<el-input v-model="formInline.name" placeholder="请输入..."></el-input>
						</el-form-item>
						<el-form-item label-width="100px" label="物品类别">
							<el-select filterable v-model="formInline.class" @change="onChange" style="width: 110px" placeholder="请选择...">
								<el-option v-for="item in options.wzlbs" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
							<el-select filterable v-model="formInline.category" @change="onChangeCategory" style="width: 110px" placeholder="请选择...">
								<el-option v-for="item in options.wzxls" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
							<el-select filterable v-model="formInline.subCategoryId" style="width: 73px; display: none" placeholder="请选择...">
								<el-option v-for="item in options.wzbls" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</el-form-item>
						<el-form-item label-width="100px" label="物品状态">
							<el-select v-model="formInline.status" placeholder="请选择...">
								<el-option label="请选择" :value="-1"></el-option>
								<el-option label="登记" :value="0"></el-option>
								<el-option label="入库" :value="1"></el-option>
								<el-option label="出库" :value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label-width="100px" label="规格型号">
							<el-input v-model="formInline.source" placeholder="请输入..."></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label-width="100px" label="物品属性">
							<el-input v-model="formInline.shape" placeholder="请输入..."></el-input>
						</el-form-item>
						<el-form-item label-width="100px" label="颜色">
							<el-input v-model="formInline.extractionPersonName" placeholder="请输入..."></el-input>
						</el-form-item>
						<el-form-item label-width="100px" label="获取时间">
							<el-date-picker
								style="width: 220px"
								format="YYYY-MM-DD"
								value-format="YYYY-MM-DD"
								v-model="formInline.ExtractionDateTimeAll"
								type="daterange"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
							>
							</el-date-picker>
						</el-form-item>
						<el-form-item label-width="100px" label="获取方式">
							<el-input v-model="formInline.extractMethod" placeholder="请输入..."></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label-width="100px" label="产地">
							<el-input v-model="formInline.extractionParts" placeholder="请输入..."></el-input>
						</el-form-item>
						<el-form-item label-width="100px" label="物品特征">
							<el-input v-model="formInline.describe" placeholder="请输入..."></el-input>
						</el-form-item>
						<el-form-item label-width="100px" label="登记时间">
							<el-date-picker
								style="width: 220px"
								v-model="formInline.createTimeAll"
								type="daterange"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
							>
							</el-date-picker>
						</el-form-item>
						<el-form-item label-width="100px" label="单位名称">
							<el-cascader :options="organData"  :props="{checkStrictly:true}" ref="refelOrgan" clearable placeholder="请选择..." />
						</el-form-item>
						<el-form-item style="margin-left: 20px">
							<el-button type="primary" @click="init" icon="el-icon-search" size="small">查询</el-button>
							<el-button type="primary" @click="onRest" icon="el-icon-view" size="small">重置</el-button>
							<!-- <el-button type="success" plain @click="onExportExcel" icon="el-icon-document" size="small">导出</el-button> -->
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<el-table
				id="tableExcel"
				ref="multipleTable"
				:data="tableData"
				:default-sort="{ prop: 'no', order: 'descending' }"
					:row-style="{ height: '37px' }"
				:cell-style="{ padding: '0' }"
				size="medium"
				style="width: 2700px"
				highlight-current-row
				:row-class-name="tableRowClassName"
				@selection-change="handleSelectionChange"
			>
				<el-table-column align="center" label="序号" type="index" fixed="left" width="60" />
				<el-table-column align="center" property="caseNo" sortable prop="caseNo" label="案件编号" width="180" fixed="left" show-overflow-tooltip />
				<el-table-column
					align="center"
					property="inspectionNo"
					sortable
					prop="inspectionNo"
					width="180"
					fixed="left"
					label="关联编号"
					show-overflow-tooltip
				/>
				<el-table-column align="center" property="caseName" sortable label="案件名称" width="180" fixed="left" show-overflow-tooltip />
				<el-table-column align="center" property="no" sortable label="物品编号" width="180" fixed="left" show-overflow-tooltip />
				<el-table-column align="center" property="name" sortable label="物品名称" width="120" fixed="left" show-overflow-tooltip />
				<el-table-column align="center" property="quantity" sortable label="数量" width="80" show-overflow-tooltip />
				<el-table-column align="center" property="className" sortable label="物品类别" width="120" show-overflow-tooltip />
				<el-table-column align="center" property="statusName" sortable label="状态" width="80" show-overflow-tooltip />
				<el-table-column align="center" property="location" sortable label="存放位置" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="evidenceSource" sortable label="规格型号" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="shape" sortable label="物品属性" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="extractionPersonName" sortable label="颜色" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="extractionDateTime" sortable label="获取时间" width="100" show-overflow-tooltip>
					<template #default="scope">{{ `${dateFormat(scope.row.createTime)}` }}</template>
				</el-table-column>
				<el-table-column align="center" property="extractMethod" sortable label="获取方式" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="extractionParts" sortable label="产地" width="100" show-overflow-tooltip />
				<el-table-column align="center" property="describe" sortable label="物品特征" width="150" show-overflow-tooltip />
				<el-table-column align="center" property="createTime" sortable label="登记时间" width="180" show-overflow-tooltip>
					<template #default="scope">{{ `${dateFormats(scope.row.createTime, 'YYYY-MM-DD HH:mm')}` }}</template>
				</el-table-column>
				<el-table-column fixed="right" align="center" label="操作">
					<template #default="scope">
						<el-button type="success" @click="onDetailsInfo(scope.row)" plain size="mini">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:page-sizes="[100, 200, 300, 400]"
				:page-size="10"
				layout="prev, pager, next, jumper,total,sizes"
				:total="total"
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				prev-text="上一页"
				next-text="下一页"
				background
			>
			</el-pagination>
		</el-card>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, computed } from 'vue';
import { ElMessageBox } from 'element-plus';
import { useStore } from '/@/store/index';
import { getOrganTree  } from '/@/api/statistics/index';
import { useRouter } from 'vue-router';
import { queryEvidence } from '/@/api/query/index';
import { exportExcel } from '/@/common/excel';
import { initDic } from '/@/common';
import { dateFormat, dateFormats } from '/@/common/index';

export default {
	name: 'queryEvidence',
	components: {},
	setup(prop, context) {
		const store = useStore();
		const router = useRouter();
		const refelOrgan = ref();
		const state = reactive({
			total: 0,
			formInline: {
				page: 1,
				pageSize: 10,
				id: 0,
				organId: 0,
				caseNo: '',
				inspectionNo: '',
				caseName: '',
				no: '',
				name: '',
				status: -1,
				shape: '',
				class: '',
				className: '',
				category: '',
				categoryName: '',
				subCategoryId: '',
				quantity: 0,
				unit: '',
				evidenceSource: '',
				extractionParts: '',
				extractMethod: '',
				extractionPerson1Nmae: '',
				extractionPersonName: '',
				extractionDateTime: null,
				extractionDateTimeStart: null,
				extractionDateTimeEnd: null,
				extractionOrganId: 0,
				extractionOrganName: '',
				describe: '',
				location: '',
				createTime: null,
				createTimeStart: null,
				createTimeEnd: null,
				createTimeAll: null,
				ExtractionDateTimeAll: null,
				currentOrganId:0
			},
			options: { wzlbs: [], wzxls: [], wzbls: [] },
			organData: [],
			tableData: [],
		});
		getOrganTree({}).then((res: any) => {
			if (res.success) {
				state.organData = [res.data];
			}
		});
		async function init() {
			state.formInline.createTimeStart = null;
			state.formInline.createTimeEnd = null;
			if (state.formInline.createTimeAll && state.formInline.createTimeAll.length > 1) {
				state.formInline.createTimeStart = state.formInline.createTimeAll[0];
				state.formInline.createTimeEnd = state.formInline.createTimeAll[1];
			}

			state.formInline.extractionDateTimeStart = null;
			state.formInline.extractionDateTimeEnd = null;
			if (state.formInline.ExtractionDateTimeAll && state.formInline.ExtractionDateTimeAll.length > 1) {
				state.formInline.extractionDateTimeStart = state.formInline.ExtractionDateTimeAll[0];
				state.formInline.extractionDateTimeEnd = state.formInline.ExtractionDateTimeAll[1];
			}
			state.formInline.currentOrganId = 0;
			if (refelOrgan.value && refelOrgan.value.getCheckedNodes().length > 0) {
				state.formInline.currentOrganId = Number(refelOrgan.value.getCheckedNodes()[0].value);
			}
			await queryEvidence(state.formInline).then((res: any) => {
				if (res.success) {
					state.tableData = res.data.data;
					state.total = res.data.totalCount;
				}
			});
		}

		function onRest() {
			state.formInline.caseNo = '';
			state.formInline.inspectionNo = '';
			state.formInline.caseName = '';
			state.formInline.no = '';
			state.formInline.name = '';
			state.formInline.status = -1;
			state.formInline.shape = '';
			state.formInline.class = '';
			state.formInline.className = '';
			state.formInline.category = '';
			state.formInline.categoryName = '';
			state.formInline.subCategoryId = '';
			state.formInline.quantity = 0;
			state.formInline.unit = '';
			state.formInline.evidenceSource = '';
			state.formInline.extractionParts = '';
			state.formInline.extractMethod = '';
			state.formInline.extractionPerson1Nmae = '';
			state.formInline.extractionPersonName = '';
			state.formInline.extractionDateTime = null;
			state.formInline.extractionDateTimeStart = null;
			state.formInline.extractionDateTimeEnd = null;
			state.formInline.extractionOrganId = 0;
			state.formInline.extractionOrganName = '';
			state.formInline.describe = '';
			state.formInline.location = '';
			state.formInline.createTime = null;
			state.formInline.createTimeStart = null;
			state.formInline.createTimeEnd = null;
			state.formInline.currentOrganId = 0;
		}

		const onDetailsInfo = (row: any) => {
			router.push({
				path: '/evidence/unit/details',
				query: { caseid: row.id },
			});
		};

		const onHandleCurrentChange = (page) => {
			state.formInline.page = page;
			init();
		};

		const onHandleSizeChange = (pageIndex) => {
			state.formInline.pageSize = pageIndex;
			init();
		};

		const onExportExcel = () => {
			exportExcel('tableExcel', '物品数据', '查询-物品数据列表.xlsx');
		};

		function onChange(key: any) {
			state.options.wzxls = [];
			state.formInline.className = state.options.wzlbs.find((x) => x.value == key)?.label;
			const parentId = state.options.dics.find((x) => x.code == key)?.id;
			state.options.wzxls = state.options.dics
				.filter((x) => x.parentId == parentId)
				.map((x) => {
					return {
						label: x.name,
						value: x.id.toString(),
					};
				});
		}

		function onChangeCategory(key: any) {
			state.formInline.categoryName = state.options.wzxls.find((x) => x.value == key)?.label;
			state.options.wzbls = state.options.dics
				.filter((x) => x.parentId == key)
				.map((x) => {
					return {
						label: x.name,
						value: x.id.toString(),
					};
				});
			console.log(state.options.wzbls);
		}

		initDic(state.options);
		init();

		return {
			init,
			onRest,
			onExportExcel,
			onDetailsInfo,
			onChange,
			onChangeCategory,
			onHandleCurrentChange,
			onHandleSizeChange,
			dateFormat,
			dateFormats,
			refelOrgan,
			...toRefs(state),
		};
	},
};
</script>
<style scoped>
.el-input,
.el-select,
.el-date-picker {
	width: 220px;
}
</style>
